<template>
	<div class="login">
		<div class="login-weaper">
			<div class="login-left">
				<!-- <div class="login-time">{{ time.txt }}</div> -->
				<!-- <div class="login-left-box">
					<div>
						<div class="logo">{{ getThemeConfig.globalViceTitle }}</div>
						<h2 class="title">{{ getThemeConfig.globalViceDes }}</h2>
						<div class="msg">
							<div class="msg-author">
								<span>{{ quotations.name }}</span>
								<span>{{ quotations.comeFrom }}</span>
							</div>
							<div class="msg-txt">{{ quotations.content }}</div>
						</div>
					</div>
				</div> -->
			</div>
			<div class="login-right">
				<div class="login-main">
					<!-- <h4 class="login-title">{{ getThemeConfig.globalTitle }}</h4> -->
					<h4 class="login-title" style="width: 160px; margin: 0 auto; transform: translateY(-33px)"><b>在线学习考试后台管理系统</b></h4>
					<el-form v-if="!thirdlogin" class="el-form login-form">
						<el-form-item style="margin-left: 0px" prop="userName">
							<div class="inputdiv">
								<el-image class="icon" :src="require('../../assets/image/usernameicon.png')" />
								<el-input
									class="elinput"
									type="text"
									:placeholder="$t('message.login.placeholder1')"
									v-model="ruleForm.userName"
									clearable
									autocomplete="off"
								>
								</el-input>
							</div>
						</el-form-item>
						<el-form-item style="margin-left: 0px" prop="password">
							<div class="inputdiv">
								<el-image class="icon" :src="require('../../assets/image/passwordicon@2x.png')" />
								<el-input
									type="password"
									class="elinput psdinput"
									:placeholder="$t('message.login.placeholder2')"
									v-model="ruleForm.password"
									autocomplete="off"
									:show-password="true"
								>
								</el-input>
								<el-image class="icon hideOrshow" :src="require('../../assets/image/lookpsdicon@2x.png')" @click="hideOrshowFn"></el-image>
							</div>
						</el-form-item>
						<el-form-item style="margin-left: 0px" prop="code">
							<!-- <div class="el-row" span="24"> -->
							<!-- <div class="el-col"> -->
							<div class="inputdiv">
								<el-image class="icon" :src="require('../../assets/image/vercodeicon@2x.png')" />
								<el-input
									class="elinput"
									type="text"
									maxlength="4"
									:placeholder="$t('message.login.placeholder3')"
									v-model="ruleForm.code"
									clearable
									autocomplete="off"
								></el-input>
								<el-image class="login-code-img" :src="'data:image/png;base64,' + imgcode" @click="getimgCode" />
							</div>
							<!-- </div> -->
							<!-- <div class="el-col el-col-8">
									<div class="login-code">
									<span class="login-code-img"></span>
									</div>
								</div> -->
							<!-- </div> -->
						</el-form-item>
						<el-form-item style="margin: 40px 0px 0">
							<el-button type="primary" class="login-submit" @click="submitForm" :loading="submit.loading">
								<span>{{ $t('message.login.btnText') }}</span>
							</el-button>
						</el-form-item>
					</el-form>
					<div v-if="thirdlogin" style="height: 300px">
						<iframe v-bind:src="qrocdeurl" style="height: 100%"></iframe>
					</div>
					<!-- <div class="login-menu">
						<a href="javascript:;">{{ $t('message.login.link.one1') }}</a> 
						<el-button icon="el-icon-search" @click="vxlogin" circle></el-button>
						<a href="javascript:;">{{ $t('message.login.link.one2') }}</a>
					</div> -->
				</div>
			</div>
		</div>

		<div class="bottom">
			<p>沪ICP备2022019040号-1</p>
			<p>2022 shwuyikeji.com 版权所有</p>
		</div>
		<div class="vue-particles">
			<!-- <vue-particles color="#dedede" shapeType="star" linesColor="#dedede" hoverMode="grab" clickMode="push" style="height: 100%"></vue-particles> -->
		</div>
	</div>
</template>

<script>
// import { Session } from '@/utils/storage'
// import { formatDate, formatAxis } from '@/utils/formatTime'
// import { PrevLoading } from '@/utils/loading.js'
// import { Post } from '@/api/linxyun/base/index'
// import { Message } from 'element-ui'
// import { quotationsList } from './mock'
// import { updateUserInfos } from '@/api/linxyun/user'

export default {
	name: 'login',
	data() {
		return {
			quotationsList,
			quotations: {},
			isView: false,
			submit: {
				loading: false,
			},
			ruleForm: {
				userName: 'admin',
				password: '123456',
				code: '',
			},
			thirdlogin: false,
			qrocdeurl: '',
			time: {
				txt: '',
				fun: null,
			},
			otherQuery: {},
			hideOrshow: false,
			imgcode: '',
			imgcodeText: '',
		};
	},
	computed: {
		// 获取当前时间
		currentTime() {
			return formatAxis(new Date());
		},
		// 获取布局配置信息
		getThemeConfig() {
			return this.$store.state.themeConfig.themeConfig;
		},
	},
	created() {
		this.initTime();
		this.getimgCode();
		// debugger
		let routePath = this.$router.currentRoute.path;
		// debugger
		console.log('path: ', routePath);
	},
	mounted() {
		// debugger
		// this.initRandomQuotations()
	},
	// updated() {
	// 	let params = this.$router.currentRoute.query
	// 	console.log('updated path: ', params)
	// 	if (params) {
	// 		if (params.code) {
	// 			Post('wxopenapiqrcode', null, params).then((res) => {
	// 				if (res) {
	// 					debugger
	// 					console.log('wxqrcodelogin', res)
	// 					this.$router.go('/login')
	// 				} else {
	// 					this.$router.go('/login')
	// 				}
	// 			})
	// 		}
	// 	}
	// },
	methods: {
		// 随机语录
		// initRandomQuotations() {
		// 	this.quotations = this.quotationsList[Math.floor(Math.random() * this.quotationsList.length)]
		// },
		// 获取图形验证码
		getimgCode() {
			Post('getImgCode', null, { Step: 0, Sender: '123456' }).then((res) => {
				if (res.success && res.code === '0000') {
					this.imgcode = res.data.CodeImg;
					this.imgcodeText = res.data.GraphicsCode;
				} else {
					this.$message.error('加载图形验证码失败，请重试');
				}
			});
		},
		// 初始化左上角时间显示
		initTime() {
			this.time.txt = formatDate(new Date(), 'YYYY-mm-dd HH:MM:SS WWW QQQQ');
			this.time.fun = setInterval(() => {
				this.time.txt = formatDate(new Date(), 'YYYY-mm-dd HH:MM:SS WWW QQQQ');
			}, 1000);
		},
		vxlogin() {
			const that = this;
			Post('vxqrcodeinfo', null, null).then((info) => {
				debugger;
				that.qrocdeurl = info.data.OPEN_QRCODE_URL;
				console.log('wxinfo:', info);
				that.thirdlogin = true;
			});
			// this.vxlogin = true
		},
		hideOrshowFn() {
			const input = document.querySelector('.psdinput input');
			const icon = document.querySelector('.hideOrshow img');
			if (this.hideOrshow) {
				input.type = 'password';
				icon.src = require('../../assets/image/lookpsdicon@2x.png');
				this.hideOrshow = false;
			} else {
				input.type = 'text';
				icon.src = require('../../assets/image/hideicon@2x.png');
				this.hideOrshow = true;
			}
		},
		// 登录按钮点击
		submitForm() {
			if (!this.ruleForm.code.toLocaleLowerCase()) {
				return this.$message.error('请输入图形验证码！');
			}
			if (this.ruleForm.code.toLocaleLowerCase() !== this.imgcodeText.toLocaleLowerCase()) {
				return this.$message.error('图形验证码输入有误！');
			}
			// 存角色编码
			let defaultAuthPageList = [];
			let defaultAuthBtnList = [];
			// admin 页面权限标识，对应路由 meta.auth
			let adminAuthPageList = ['admin'];
			// admin 按钮权限标识
			let adminAuthBtnList = ['btn.add', 'btn.del', 'btn.edit', 'btn.link'];
			// test 页面权限标识，对应路由 meta.auth
			let testAuthPageList = ['test'];
			// test 按钮权限标识
			let testAuthBtnList = ['btn.add', 'btn.link'];
			// 先写死，后面再调整
			/**
			 * Todo
			 */
			defaultAuthBtnList = adminAuthBtnList;
			// if (this.ruleForm.userName === 'admin') {
			// 	defaultAuthPageList = adminAuthPageList
			// 	defaultAuthBtnList = adminAuthBtnList
			// } else {
			// 	defaultAuthPageList = testAuthPageList
			// 	defaultAuthBtnList = testAuthBtnList
			// }
			const user = { username: this.ruleForm.userName, password: this.ruleForm.password };
			const data = this.$store
				.dispatch('user/login', user)
				.then((userInfo) => {
					if (userInfo) {
						defaultAuthPageList.push(userInfo.UserRoles);
						const user = {
							CustomerID: userInfo.CustomerID,
							CustomerType: userInfo.CustomerType,
							userName: userInfo.UserName,
							roles: userInfo.UserRoles,
							photo:
								this.ruleForm.userName === 'admin'
									? 'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1813762643,1914315241&fm=26&gp=0.jpg'
									: 'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=317673774,2961727727&fm=26&gp=0.jpg',
							time: new Date().getTime(),
							authPageList: defaultAuthPageList,
							authBtnList: defaultAuthBtnList,
							UserID: userInfo.UserID,
						};
						// 存储 token 到浏览器缓存
						Session.set('token', userInfo.Token);
						// 存储用户信息到浏览器缓存
						Session.set('user', user);
						// 存储用户信息到vuex
						this.$store.dispatch('user/setUser', user);

						this.$router.push({ path: this.redirect || '/', query: this.otherQuery });

						updateUserInfos({ UserID: userInfo.UserID, EntCode: BASE_API.ENT_CODE, LoginTime: '_SysTime_' });
						if (user.roles === '') {
							this.$message({
								message: '没有设置用户角色，请联系管理员！',
								type: 'info',
								duration: 5000,
							});
						}
						// PrevLoading.start()
						// window.location.href = `${window.location.origin}${window.location.pathname}`
						// setTimeout(() => {
						// 	this.$message.success(`${this.currentTime}，${this.$t('message.login.signInText')}`)
						// }, 300)
					}
				})
				.catch(() => {
					this.loading = false;
				});
			// .catch(async (error) => {
			// 	console.log(error)
			// 	reject(error)
			// })
			// 存储 token 到浏览器缓存
			// Session.set('token', data.Token)
			// // 存储用户信息到浏览器缓存
			// Session.set('userInfo', userInfos)
			// // 存储用户信息到vuex
			// this.$store.dispatch('userInfos/setUserInfos', userInfos)
			// PrevLoading.start()
			// window.location.href = `${window.location.origin}${window.location.pathname}`
			// setTimeout(() => {
			// 	this.$message.success(`${this.currentTime}，${this.$t('message.login.signInText')}`)
			// }, 300)
		},
	},
	unmounted() {
		clearInterval(this.time.fun);
	},
};
</script>

<style scoped lang="scss">
.login {
	height: 100%;
	width: 100%;
	overflow: hidden;
	display: flex;
	position: relative;
	.vue-particles {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		// background: radial-gradient(ellipse at top left, rgba(105, 155, 200, 1) 0%, rgba(181, 197, 216, 1) 57%);
		background: url('../../assets/image/bg@2x.png') no-repeat;
		background-size: 100% 100%;
	}
	.login-weaper {
		margin: auto;
		height: 500px;
		display: flex;
		box-sizing: border-box;
		position: relative;
		z-index: 1;
		border: none;
		// box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
		background: url('../../assets/image/loginbg@2x.png') no-repeat;
		background-size: 100% 100%;
		.login-left {
			width: 491px;
			padding: 20px;
			font-size: 16px;
			color: #fff;
			position: relative;
			// background-color: rgba(64, 158, 255, 0.8);
			display: flex;
			flex-direction: column;
			border-top-left-radius: 4px;
			border-bottom-left-radius: 4px;
			.login-time {
				width: 100%;
				color: #fff;
				opacity: 0.9;
				font-size: 14px;
				overflow: hidden;
			}
			.login-left-box {
				flex: 1;
				overflow: hidden;
				position: relative;
				z-index: 1;
				display: flex;
				align-items: center;
				padding: 80px 45px;
				.logo {
					font-size: 22px;
					margin-bottom: 15px;
				}
				.title {
					color: #fff;
					font-weight: 300;
					letter-spacing: 2px;
					font-size: 16px;
				}
				.msg {
					color: #fff;
					font-size: 13px;
					margin-top: 35px;
					.msg-author {
						opacity: 0.6;
						span:last-of-type {
							margin-left: 15px;
						}
					}
					.msg-txt {
						margin-top: 15px;
						line-height: 22px;
					}
				}
			}
		}
		.login-right {
			width: 491px;
			padding: 20px;
			position: relative;
			align-items: center;
			display: flex;
			// background-color: rgba(255, 255, 255, 1);
			border-top-right-radius: 4px;
			border-bottom-right-radius: 4px;
			.login-main {
				margin: 0 auto;
				width: 70%;
				.login-title {
					color: #333;
					margin-bottom: 40px;
					font-weight: 500;
					font-size: 22px;
					text-align: center;
					letter-spacing: 4px;
				}
				.login-form {
					margin: 10px 0;
					i {
						color: #333;
					}
					.el-form-item {
						margin-bottom: 20px !important;
						.inputdiv {
							display: flex;
							align-items: center;
							border-radius: 4px;
							border-bottom: 1px solid #e7e7e7;
							padding: 0 15px;
							.icon {
								width: 20px;
								height: 20px;
								flex: 0 0 auto;
							}
							.hideOrshow {
								cursor: pointer;
							}
							.elinput ::deep(.el-input__inner) {
								border: none !important;
								outline: medium !important;
								padding: 0 10px;
							}
							::deep(.el-input__suffix) {
								display: none !important;
							}
						}
						.login-code-img {
							margin-top: 2px;
							width: 140px;
							height: 38px;
							// color: #333;
							// font-size: 14px;
							// font-weight: 700;
							// letter-spacing: 5px;
							// line-height: 38px;
							// text-indent: 5px;
							// text-align: center;
							cursor: pointer;
							transition: all ease 0.2s;
							border-radius: 4px;
							&:hover {
								border-color: #c0c4cc;
								transition: all ease 0.2s;
							}
						}
						.login-code {
							display: flex;
							align-items: center;
							justify-content: space-around;
							margin: 0 0 0 10px;
							user-select: none;
							.login-code-img {
								margin-top: 2px;
								width: 100px;
								height: 38px;
								border: 1px solid #dcdfe6;
								// color: #333;
								// font-size: 14px;
								// font-weight: 700;
								// letter-spacing: 5px;
								// line-height: 38px;
								// text-indent: 5px;
								// text-align: center;
								cursor: pointer;
								transition: all ease 0.2s;
								border-radius: 4px;
								&:hover {
									border-color: #c0c4cc;
									transition: all ease 0.2s;
								}
							}
						}
						.login-submit {
							width: 100%;
							height: 45px;
							letter-spacing: 2px;
							font-weight: 300;
							background: #0472fd;
							border-radius: 13px;
						}
					}
				}
				.login-menu {
					margin-top: 30px;
					width: 100%;
					text-align: left;
					a {
						color: #999;
						font-size: 12px;
						margin: 0 8px;
						text-decoration: none;
						&:hover {
							color: #1e9fff;
							text-decoration: underline;
						}
					}
				}
			}
		}
	}
}
::deep(.el-input__inner) {
	-webkit-box-shadow: 0 0 0 1000px #ffffff inset;
}

.bottom {
	position: absolute;
	bottom: 0;
	color: #fff;
	left: 50%;
	z-index: 999;
	transform: translateX(-50%);
	bottom: 50px;
	text-align: center;
}

::deep(.el-input__inner::-webkit-input-placeholder) {
	color: #cecece !important;
}
</style>
